<template>
  <!-- 模板语法 -->
  <!-- 把值变成动态的 -->
  <span>{{ msg }}</span>
  <div v-html="msg1"></div>
  <!-- 把属性变成动态的 -->
  <span v-bind:class="msg2">名字</span>
  <a :href="msg3">百度</a>

  <!-- 事件 -->
  <button v-on:click="showMsg">你点我试试</button>
  <button @click="showMsg">你再点我试试</button>
  <!-- 阻止默认行为 -->
  <a :href="msg3" @click.prevent="showMsg">百度</a>
  <!-- 阻止事件冒泡 -->
  <div class="box" @click="boxClick">
    <div class="box1" @click.stop="box1Click"></div>
  </div>
  <!-- 一次性事件 -->
  <button @click.once="showMsg">你再点我试试(一次性)</button>
  <!-- 只有点自己才触发 不会触发子元素 -->
  <div class="box" @click.self="boxClick">
    <div class="box1" @click="box1Click">子元素</div>
  </div>
  <!-- 先触发父元素再触发子元素 -->
  <div class="box" @click.capture="boxClick">
    <div class="box1" @click="box1Click">先父后子</div>
  </div>

  <div class="heightBox" @scroll="boxScroll">
    <div class="conBox"></div>
  </div>

  <!-- ---------------------- 以下是按键修饰符-------------------- -->
  <input type="text" @keydown.enter="keyMsg" />
  <input type="text" @keydown.ctrl.shift.t="keyMsg" />

  <!-- ---------------------- 以下是鼠标修饰符-------------------- -->
  <div class="box" @mouseenter="mouseMsg" @mouseleave="mouseMsg1" @click.left="mouseMsg2">
    鼠标移入移出
  </div>
</template>

<script>
export default {
  name: 'AboutView',
  data() {
    // 变量
    return {
      msg: '模板语法',
      msg1: '<h1>哈哈</h1>',
      msg2: 'name',
      msg3: 'https://cn.bing.com',
    }
  },
  methods: {
    showMsg() {
      alert('试试就试试')
    },
    boxClick() {
      alert('父框被点击了')
    },
    box1Click() {
      alert('子框被点击了')
    },
    boxScroll() {
      console.log('滚动了')
    },
    keyMsg() {
      alert('按下了')
    },
    mouseMsg() {
      console.log('鼠标移入')
    },
    mouseMsg1() {
      console.log('鼠标移出')
    },
    mouseMsg2() {
      console.log('鼠标左键被点击了')
    },
  },
}
</script>

<style>
.box {
  width: 200px;
  height: 200px;
  background-color: red;
}
.box1 {
  width: 100px;
  height: 100px;
  background-color: blue;
}
.heightBox {
  width: 200px;
  height: 200px;
  background-color: antiquewhite;
  overflow-y: auto;
}
.conBox {
  width: 100px;
  height: 800px;
  background-color: blue;
}
</style>
